
<template>
  <div style="display: flex" class="tempxyz menmuStyle">
    <CCard class="rightCard">
      <CCardHeader class="header-wraper">
        <div class="header-left-titleWraper">
       
          <span class="textTitle">显卡监控</span>
          <span>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</span>
          <span class="textTitle">总使用率(%):<strong>&nbsp;
              <span style="color:#5290e8">{{graphicsNum}}</span></strong>
          </span>
        </div>
        <div class="header-right-wraper">
          <Input
            v-model="nodeValue"
            placeholder="请输入关键字"
            style="width: 200px"
            class="headerMar"
          />
          <Button
            type="primary"
            @click="search"
            class="system-btn-style headerMar"
            style="margin-right: 10px"
          >
            <Icon type="ios-search" />&nbsp;查询
          </Button>
        </div>
      </CCardHeader>
      <CCardBody class="card-body">
        <div style="height: calc(100% - 46px)">
          <!-- <TableList ref="table" :getColumn="getColumns" :getAxios="getAxios">
          </TableList> -->
          <Table
            border
            stripe
            :columns="getColumns"
            :data="graphicsList"
          ></Table>
        </div>
      </CCardBody>
    </CCard>
  </div>
</template>

<script>
import TableList from "@/template/table/TableList";

export default {
  name: "graphicsMonitor",
//   components: { TableList },
  data() {
    return {
      nodeValue:'',
      graphicsNum:"",
      getColumns: [
        {
          title: "序号",
          type:"index",
          width:"100",
          align: "center",
        },
        {
          title: "主机名",
          key: "nodename",
          width: "180",
          align: "center",
        },
        {
          title: "显卡编号",
          key: "uuid",
          align: "center",
        },
        {
          title: "显卡型号",
          key: "type",
          align: "center",
        },
        {
          title: "使用率(%)",
          key: "value",
          width: "180",
          align: "center",
        },
      ],
      getAxios: {
        url: this.$api.monitorApi.getGraphicsInfo, //请求路径
        method: "get", //请求方式
        dataList: {}, //请求参数
      },
      graphicsList:[],//数据
    };
  },
  mounted() {
    this.getGraphicsList();
    this.getGraphicsInfo();
  },
  methods: {
      getGraphicsList(){
        let path = this.$api.monitorApi.getGraphicsInfo;
        this.http.get(path).then((res) => {
              if(res.data.code == 0){
                  this.graphicsList = res.data.data.result;
              }else{
                  this.$Message.error(res.data.message);
              }
          })
      },
      getGraphicsInfo(){
          let path = this.$api.monitorApi.getGraphicsUtilization;
          this.http.get(path).then((res) => {
              if(res.data.code == 0){
                  this.graphicsNum = res.data.data.gpuInfo.gpuUse;
              }
          })
      },
    search(){
        let path = this.$api.monitorApi.getGraphicsInfo;
        let param = {
            nodeName: this.nodeValue,
        };
        let getAxiosData = {
            method: "get",
            url: path,
        };
        this.$refs.table.getRefreshTable(param, getAxiosData);
        return;

    },
  },
};
</script>

<style scoped>
.rightCard {
  width: 80%;
  flex: 1;
}

.leftCard {
  width: 18%;
}
/deep/.card {
  margin-bottom: 0;
}
.headerMar {
  margin-left: 10px;
}
</style>

